<template>
  <div class="box">
    <div class="leftBox" :class="showMenu ? '' : 'leftBox-no'">
      <div style="background-color: #021c2e">
        <div class="search">
          <a-input ref="userNameInput" style="height: 48px" v-model="searchTitle" placeholder="请输入搜索内容">
            <a-tooltip slot="prefix">
              <a-icon type="search" style="color: #fff" />
            </a-tooltip>
            <a-tooltip slot="suffix">
              <a-icon type="filter" :style="{ color: isFilter ? '#1666F0' : '#fff' }" @click="handleFilter()" />
            </a-tooltip>
          </a-input>
          <div class="searchResult" v-show="searchTitle || isFilter">
            <div class="filter-box" v-if="isFilter">
              <div class="item">
                <div class="left">所属流域</div>
                <div class="right">
                  <a-select
                    allowClear
                    v-model="searchForm.watershedId"
                    size="large"
                    style="width: 100%"
                    :placeholder="'请选择'"
                  >
                    <a-select-option :value="item.id" v-for="item in watershedDataForm" :key="item.id">
                      {{ item.areaName }}
                    </a-select-option>
                  </a-select>
                </div>
              </div>
              <div class="item">
                <div class="left">所属行政区</div>
                <div class="right">
                  <a-tree-select
                    allowClear
                    size="large"
                    showSearch
                    :replaceFields="replaceFields"
                    treeNodeFilterProp="title"
                    style="width: 100%"
                    v-model="searchForm.provinceId"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    placeholder="请选择"
                    :tree-data="selectDataForm"
                  />
                </div>
              </div>
              <div class="item">
                <div class="left">类型</div>
                <div class="right">
                  <a-select
                    allowClear
                    v-model="searchForm.stationType"
                    size="large"
                    style="width: 100%"
                    :placeholder="'请选择'"
                  >
                    <a-select-option value="1"> 常规水电站 </a-select-option>
                    <a-select-option value="2"> 抽水蓄能电站 </a-select-option>
                    <a-select-option value="3"> 其他 </a-select-option>
                    <a-select-option value=""> 全部 </a-select-option>
                  </a-select>
                </div>
              </div>
              <div class="item">
                <div class="left">坝高</div>
                <div class="right">
                  <a-select
                    allowClear
                    v-model="searchForm.damHeight"
                    size="large"
                    style="width: 100%"
                    :placeholder="'请选择'"
                  >
                    <a-select-option value="0~30"> 0~30m </a-select-option>
                    <a-select-option value="30~70"> 30~70m </a-select-option>
                    <a-select-option value="70~100"> 70~100m </a-select-option>
                    <a-select-option value="100~200"> 100~200m </a-select-option>
                    <a-select-option value="200"> 200m以上 </a-select-option>
                    <a-select-option value=""> 全部 </a-select-option>
                  </a-select>
                </div>
              </div>
              <div class="item">
                <div class="left">坝长</div>
                <div class="right">
                  <a-select
                    allowClear
                    v-model="searchForm.damLength"
                    size="large"
                    style="width: 100%"
                    :placeholder="'请选择'"
                  >
                    <a-select-option value="0~300"> 0~300m </a-select-option>
                    <a-select-option value="300~500"> 300~500m </a-select-option>
                    <a-select-option value="500~800"> 500~800m </a-select-option>
                    <a-select-option value="800~1000"> 800~1000m </a-select-option>
                    <a-select-option value="1000~1500"> 1000~1500m </a-select-option>
                    <a-select-option value="1500"> 1500m以上 </a-select-option>
                    <a-select-option value=""> 全部 </a-select-option>
                  </a-select>
                </div>
              </div>
              <div class="item">
                <div class="left">装机容量</div>
                <div class="right">
                  <a-select
                    allowClear
                    v-model="searchForm.installedCapacity"
                    size="large"
                    style="width: 100%"
                    :placeholder="'请选择'"
                  >
                    <a-select-option value="0~300"> 0~300MW </a-select-option>
                    <a-select-option value="300~500"> 300~500MW </a-select-option>
                    <a-select-option value="500~800"> 500~800MW </a-select-option>
                    <a-select-option value="800~1000"> 800~1000MW </a-select-option>
                    <a-select-option value="1000~1500"> 1000~1500MW </a-select-option>
                    <a-select-option value="1500"> 1500MW以上 </a-select-option>
                    <a-select-option value=""> 全部 </a-select-option>
                  </a-select>
                </div>
              </div>
              <div class="item">
                <div class="left">建设状态</div>
                <div class="right">
                  <a-select
                    allowClear
                    v-model="searchForm.stationStatus"
                    size="large"
                    style="width: 100%"
                    :placeholder="'请选择'"
                  >
                    <a-select-option value="1"> 已建 </a-select-option>
                    <a-select-option value="2"> 在建 </a-select-option>
                    <a-select-option value="3"> 拟建 </a-select-option>
                    <a-select-option value=""> 全部 </a-select-option>
                  </a-select>
                </div>
              </div>
            </div>
            <div class="top-box">
              <div class="item">大坝名</div>
              <div class="item">坝高</div>
              <div class="item">类型</div>
            </div>
            <div class="main-content">
              <div class="main-box" v-for="item in searchData" :key="item.id" @click="onSearchItem(item)">
                <div class="item">{{ item.stationName }}</div>
                <div class="item">{{ item.damHeight }}m</div>
                <div class="item">
                  {{
                    item.stationType == 1
                      ? '常规水电站'
                      : item.stationType == 2
                      ? '抽水蓄能电站'
                      : item.stationType == 3
                      ? '其他'
                      : '未分类'
                  }}
                </div>
              </div>
              <div v-if="!searchData.length">暂无数据</div>
            </div>
          </div>
        </div>
      </div>

      <div style="background-color: #002463">
        <div class="title-box">
          <div class="in-box">
            <img class="jiao" src="@/assets/home/jiao.png" /><img class="img" src="@/assets/home/title.png" />面板坝列表
            <img :src="isShowCfrd ? shouqi : zhankai" @click="isShowCfrd = !isShowCfrd" />
          </div>
        </div>
      </div>
      <div style="background-color: #021c2e" v-if="isShowCfrd">
        <div class="left-tree">
          <div class="top-box">
            <div class="item" :class="[current == 2 ? 'itemActive' : '']" @click="handleCurrent(2, 'current')">
              省行政区
            </div>
            <div class="item" :class="[current == 1 ? 'itemActive' : '']" @click="handleCurrent(1, 'current')">
              流域水系
            </div>
          </div>
          <a-tree
            class="myTree"
            ref="myTree"
            style="color: #fff"
            :tree-data="treeData"
            :replaceFields="treeProps"
            :selectedKeys="selectedKeys"
          >
            <template #title="{ name, dataRef, selected }">
              <div class="tree-box" @click="handleItem(dataRef)">
                <img v-if="selected" class="jiao" src="@/assets/home/jiao.png" />
                <img v-if="selected" class="img" src="@/assets/home/title.png" />
                <span>{{ name }}</span>
                <span class="num">{{ dataRef.stationStatus ? dataRef.damHeight + 'm' : dataRef.damHeight }}</span>
              </div>
            </template>
          </a-tree>
          <div class="addBtn-box" v-if="userRole != 0">
            <div v-if="userRole == 3" class="add-import" @click="handleImport">导出数据</div>
            <div class="add" :class="userRole != 3 ? 'add-once' : ''" @click="handleAdd">
              <img src="@/assets/home/add3.png" />添加面板坝
            </div>
          </div>
        </div>
      </div>

      <div class="myMenuIcon" @click="handleShowMenu" v-if="!(searchTitle || isFilter)">
        <img style="width: 16px; height: 16px" v-if="showMenu" src="@/assets/home/xiangzuo.png" />
        <img style="width: 16px; height: 16px" v-else src="@/assets/home/xiangyou.png" />
      </div>
    </div>

    <!-- 地图 -->
    <div class="main-map">
      <Cesium
        ref="myCesium"
        :checkedOne="checkedOne"
        :checkedTwo="checkedTwo"
        :checkedThr="checkedThr"
        @flyTo="flyTo"
        @setCoordinate="setCoordinate"
        @setScene="setScene"
      />
      <div class="printBox">
        <div class="item" style="margin-right: 20px">
          <div class="left">经度</div>
          <div class="right">{{ longitude }}</div>
        </div>
        <div class="item">
          <div class="left">纬度</div>
          <div class="right">{{ latitude }}</div>
        </div>
      </div>
      <div style="background-color: #021c2e" v-if="showLegend">
        <div class="shaixuan" v-if="isShowLegend">
          <div class="item-box">
            <img src="@/assets/home/printone.png" /><span class="text">已建电站</span><a-switch v-model="checkedOne" />
          </div>
          <div class="item-box">
            <img src="@/assets/home/printtwo.png" /><span class="text">在建电站</span><a-switch v-model="checkedTwo" />
          </div>
          <div class="item-box">
            <img src="@/assets/home/printthr.png" /><span class="text">拟建电站</span><a-switch v-model="checkedThr" />
          </div>
        </div>
      </div>
      <div class="ability" :class="showRightMenu ? '' : 'ability-no'">
        <div style="background-color: #1666f0; border-radius: 4px; margin-bottom: 24px">
          <div class="item" @click="handleChange">{{ scene }}</div>
        </div>
        <div style="background-color: #1666f0; border-radius: 4px; margin-bottom: 24px">
          <div class="item" @click="handleHome">
            <img src="@/assets/home/home.png" />
          </div>
        </div>
        <div style="background-color: #1666f0; border-radius: 4px; margin-bottom: 24px">
          <div>
            <div style="border-bottom: 1px solid #3b96ff" class="item" @click="handleAmplify">
              <img src="@/assets/home/add-white.png" />
            </div>
            <div class="item" @click="handleReduce">
              <img src="@/assets/home/cut-white.png" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="rightBox" :class="showRightMenu ? '' : 'rightBox-no'" v-if="showRight && mapStatus == 'big'">
      <!-- <div class="rightBox" v-if="false"> -->
      <div class="title-box">
        <div class="in-box">
          <img class="jiao" src="@/assets/home/jiao.png" /><img class="img" src="@/assets/home/title.png" />数据统计
        </div>
      </div>
      <div class="one-box">
        <div class="one-item" style="margin-right: 8px; margin-bottom: 12px">
          <div class="title">总装机容量</div>
          <div class="text">
            <span class="num" style="font-size: 20px">{{ statisticForm.installedCapacity }}</span
            >MW
          </div>
          <img class="img" src="@/assets/home/one.png" />
        </div>
        <div class="one-item">
          <div class="title">面板坝数量</div>
          <div class="text">
            <span class="num">{{ statisticForm.damTotal }}</span
            >座
          </div>
          <img class="img" src="@/assets/home/two.png" />
        </div>
        <div class="one-item" style="margin-right: 8px">
          <div class="title">坝高70m以上总数</div>
          <div class="text">
            <span class="num">{{ statisticForm.damHeight70 }}</span
            >座
          </div>
          <img class="img" src="@/assets/home/three.png" />
        </div>
        <div class="one-item">
          <div class="title">坝高200m以上总数</div>
          <div class="text">
            <span class="num">{{ statisticForm.damHeight200 }}</span
            >座
          </div>
          <img class="img" src="@/assets/home/four.png" />
        </div>
      </div>
      <div class="title-box">
        <div class="in-box">
          <img class="jiao" src="@/assets/home/jiao.png" />
          <img class="img" src="@/assets/home/title.png" />
          已建/在建面板坝数量
          <img src="@/assets/home/jiantou.png" @click="handleExport" />
        </div>
      </div>
      <div class="one-box">
        <div class="two-item" style="margin-bottom: 12px">
          <my-line v-if="statisticForm.yearBuiltNum.length" :dataSource="statisticForm.yearBuiltNum" />
        </div>
        <div class="two-item">
          <my-linetwo v-if="statisticForm.yearBuildingNum.length" :dataSource="statisticForm.yearBuildingNum" />
        </div>
      </div>
      <div class="title-box">
        <div class="in-box">
          <img class="jiao" src="@/assets/home/jiao.png" />
          <img class="img" src="@/assets/home/title.png" />
          面板堆石坝发展图
          <img src="@/assets/home/jiantou.png" @click="handleExport" />
        </div>
      </div>
      <div class="one-box">
        <div class="three-item">
          <my-drop :dataSource="statisticForm.yearHeightNum" />
        </div>
      </div>
      <div class="myMenuIcon" @click="handleShowRightMenu">
        <img style="width: 16px; height: 16px" v-if="!showRightMenu" src="@/assets/home/xiangzuo.png" />
        <img style="width: 16px; height: 16px" v-else src="@/assets/home/xiangyou.png" />
      </div>
    </div>
    <div class="rightBox" :class="showRightMenu ? '' : 'rightBox-no'" v-else-if="showRight && mapStatus == 'small'">
      <div class="title-box">
        <div class="in-box">
          <img class="jiao" src="@/assets/home/jiao.png" /><img class="img" src="@/assets/home/title.png" />面板坝信息
        </div>
      </div>
      <a-spin :spinning="spinning" size="large">
        <div class="two-box">
          <div class="top-box">
            <div
              class="item"
              :class="[rightCurrent == 1 ? 'itemActive' : '']"
              @click.stop="handleCurrent(1, 'rightCurrent')"
            >
              基本信息
              <a-icon v-if="rightCurrent == 1 && userRole != 0" @click.stop="handleEditInfo" type="edit" />
            </div>
            <div
              class="item"
              :class="[rightCurrent == 2 ? 'itemActive' : '']"
              @click.stop="handleCurrent(2, 'rightCurrent')"
            >
              详细信息
            </div>
          </div>
          <viewer v-if="bannerList.length" :images="bannerList">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide class="my-banner" v-for="(item, index) in bannerList" :key="index">
                <img :src="item.src" />
              </swiper-slide>

              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
            <!-- <a-carousel autoplay :autoplaySpeed="3000" arrows>
            <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px; z-index: 1">
              <a-icon type="left-circle" />
            </div>
            <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
              <a-icon type="right-circle" />
            </div>
            <div class="my-banner" v-for="(item, index) in bannerList" :key="index">
              <img :src="item.src" />
            </div>
          </a-carousel> -->
          </viewer>

          <div class="noBanner" v-else>暂无相关照片</div>
          <div class="info" v-show="rightCurrent == 1">
            <right-info :dataForm="infoData" :formItem="infoFormItem" />
          </div>
          <div class="info" v-show="rightCurrent == 2">
            <right-details :formItem="detailsItem" @handleDetailItem="handleDetailItem" />
          </div>
        </div>
      </a-spin>

      <div
        class="hover-box"
        :class="[isLook && activeType != 'basic' && activeType != 'material' ? 'hover-box-big' : 'hover-box-small']"
        v-if="isEdit && activeType != 'addCfrd'"
      >
        <a-spin :spinning="spinningXq" size="large">
          <div class="title-box">
            <div class="in-box">
              <img class="jiao" src="@/assets/home/jiao.png" />
              <img class="img" src="@/assets/home/title.png" />
              {{
                activeType == 'section'
                  ? '坝体主断面分区图'
                  : activeType == 'basic'
                  ? '编辑基本信息'
                  : activeType == 'material'
                  ? '坝料'
                  : activeType == 'structure'
                  ? '止水结构'
                  : activeType == 'geology'
                  ? '地质'
                  : activeType == 'panel'
                  ? '面板'
                  : activeType == 'board'
                  ? '趾板'
                  : activeType == 'prevention'
                  ? '防渗'
                  : activeType == 'results'
                  ? '计算结果'
                  : activeType == 'flood'
                  ? '泄水建筑物'
                  : activeType == 'plan'
                  ? '平面布置图'
                  : ''
              }}
              <img src="@/assets/home/err.png" @click="() => handleCancelInfo()" />
            </div>
          </div>

          <!-- 基本信息 -->
          <Basic ref="myForm" v-if="activeType == 'basic'" :dataForm="infoData" @cancel="handleCancelInfo" />
          <!-- 坝体主断面分区图 -->
          <Section
            v-else-if="activeType == 'section'"
            ref="myForm"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelInfo"
            @handleEdit="handleDetailItem"
          />
          <!-- 坝料 -->
          <Material
            v-else-if="activeType == 'material'"
            ref="myForm"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelInfo"
          />
          <!-- 止水结构 -->
          <Structure
            v-else-if="activeType == 'structure'"
            ref="myForm"
            :isLook="isLook"
            :showFooter="true"
            :dataForm="detailsInfo"
            @cancel="handleCancelInfo"
            @handleEdit="handleDetailItem"
          />
          <!-- 地质 -->
          <Geology
            v-else-if="activeType == 'geology'"
            ref="myForm"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelInfo"
            @handleEdit="handleDetailItem"
          />
          <!-- 面板 -->
          <Panel
            v-else-if="activeType == 'panel'"
            ref="myForm"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelInfo"
            @handleEdit="handleDetailItem"
          />
          <!-- 趾板 -->
          <Board
            v-else-if="activeType == 'board'"
            ref="myForm"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelInfo"
            @handleEdit="handleDetailItem"
          />
          <!-- 渗透 -->
          <Prevention
            v-else-if="activeType == 'prevention'"
            ref="myForm"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelInfo"
            @handleEdit="handleDetailItem"
          />
          <!-- 计算结果 -->
          <Results
            v-else-if="activeType == 'results'"
            ref="myForm"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelInfo"
            @handleEdit="handleDetailItem"
          />
          <!-- 泄水建筑物 -->
          <Flood
            v-else-if="activeType == 'flood'"
            ref="myForm"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelInfo"
            @handleEdit="handleDetailItem"
          />
          <!-- 平面布置图 -->
          <Plan
            v-else-if="activeType == 'plan'"
            ref="myForm"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelInfo"
            @handleEdit="handleDetailItem"
          />
        </a-spin>
      </div>

      <div v-if="secordFlag" class="secordMenu" :class="secordMenu == 1 ? 'secordMenu1' : 'secordMenu2'">
        <SecordMenu :dataSource="secordData" :secordMenu="secordMenu" @handleEdit="handleSecordItem" />
      </div>
      <div class="myMenuIcon" @click="handleShowRightMenu">
        <img style="width: 16px; height: 16px" v-if="!showRightMenu" src="@/assets/home/xiangzuo.png" />
        <img style="width: 16px; height: 16px" v-else src="@/assets/home/xiangyou.png" />
      </div>
      <!-- 二级菜单 -->
      <div
        class="hover-box"
        :class="secordData[0].key == 'materialSource' ? 'hover-secord-big' : 'hover-secord-small'"
        v-if="isSecordShow"
      >
        <a-spin :spinning="spinningXq" size="large">
          <div class="title-box">
            <div class="in-box">
              <img class="jiao" src="@/assets/home/jiao.png" />
              <img class="img" src="@/assets/home/title.png" />
              {{
                serordType == 'materialSource'
                  ? '料源'
                  : serordType == 'damLevelConfig'
                  ? '级配'
                  : serordType == 'testParam'
                  ? '试验参数'
                  : serordType == 'simulationParam'
                  ? '模拟参数'
                  : serordType == 'slopeStabilityResult'
                  ? '坝坡稳定计算成果'
                  : serordType == 'staticForceResult'
                  ? '坝体应力变形最大值静力计算结果'
                  : serordType == 'powerResult'
                  ? '坝体应力变形最大值动力计算结果'
                  : ''
              }}
              <img src="@/assets/home/err.png" @click="() => handleCancelSecord()" />
            </div>
          </div>
          <MaterialSource
            v-if="serordType == 'materialSource'"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelSecord"
            @handleEdit="handleSecordItem"
          />
          <DamLevelConfig
            v-else-if="serordType == 'damLevelConfig'"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelSecord"
            @handleEdit="handleSecordItem"
          />
          <TestParam
            v-else-if="serordType == 'testParam'"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelSecord"
            @handleEdit="handleSecordItem"
          />
          <SimulationParam
            v-else-if="serordType == 'simulationParam'"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelSecord"
            @handleEdit="handleSecordItem"
          />
          <SlopeStabilityResult
            v-else-if="serordType == 'slopeStabilityResult'"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelSecord"
            @handleEdit="handleSecordItem"
          />
          <StaticForceResult
            v-else-if="serordType == 'staticForceResult'"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelSecord"
            @handleEdit="handleSecordItem"
          />
          <PowerResult
            v-else-if="serordType == 'powerResult'"
            :isLook="isLook"
            :dataForm="detailsInfo"
            @cancel="handleCancelSecord"
            @handleEdit="handleSecordItem"
          />
        </a-spin>
      </div>
    </div>
    <!-- 添加面板坝 -->
    <div class="add-box" v-if="isEdit && activeType == 'addCfrd'">
      <div class="title-box">
        <div class="in-box">
          <img class="jiao" src="@/assets/home/jiao.png" />
          <img class="img" src="@/assets/home/title.png" />
          {{ '添加面板坝' }}
          <img src="@/assets/home/err.png" @click="() => handleCancelInfo()" />
        </div>
      </div>
      <AddCfrd ref="myForm" :dataForm="{}" @cancel="handleCancelInfo" />
    </div>

    <!-- 机器人 -->
    <div class="robot" :class="isRobotIn ? 'tobot-active' : ''" @click.stop="handleDrawer">
      <div v-if="isTigs" class="tigsBox">
        <img class="qipao" src="@/assets/home/qipao.png" />
        <div class="qipaocody"></div>
      </div>
      <img class="robotImg" src="@/assets/home/robot.gif" />
      <img v-if="isTigs" class="closeImg" src="@/assets/home/close2.png" @click.stop="handleBack" />
    </div>

    <MyModal :visible="visible" :width="550" :title="'导出数据'" @handleCancel="handleCancel">
      <template #dialogBox>
        <a-checkbox-group v-model="checkedList">
          <a-row class="myCheckBox">
            <a-col :span="12">
              <a-checkbox :value="1"> 已建电站 </a-checkbox>
            </a-col>
            <a-col :span="12">
              <a-checkbox :value="2"> 在建电站 </a-checkbox>
            </a-col>
            <a-col :span="12" style="margin-top: 16px">
              <a-checkbox :value="3"> 拟建电站 </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
        <div class="myBtnBox">
          <a-button type="primary" @click="handleSumbit"> 确定 </a-button>
        </div>
      </template>
    </MyModal>

    <a-drawer placement="right" :width="500" :closable="false" :visible="visibleDrawer" @close="onCloseDrawer">
      <template slot="title">
        <div class="myTitle">
          <div class="title-box">
            <div class="in-box">
              <div>
                <img class="jiao" src="@/assets/home/jiao.png" /><img
                  class="img"
                  src="@/assets/home/title.png"
                />文档助手
              </div>
              <img src="@/assets/home/err.png" @click="visibleDrawer = false" />
            </div>
          </div>
        </div>
      </template>
    </a-drawer>
  </div>
</template>

<script>
import Cesium from '@/components/Cesium';
import MyLine from './components/myLine.vue';
import MyLinetwo from './components/myLinetwo.vue';
import MyDrop from './components/myDrop.vue';
import RightInfo from './RightInfo.vue';
import RightDetails from './RightDetails.vue';
import Basic from './Basic.vue';
import Section from './Section.vue';
import Material from './Material.vue';
import Structure from './Structure.vue';
import Geology from './Geology.vue';
import Panel from './Panel.vue';
import Board from './Board.vue';
import Prevention from './Prevention.vue';
import Results from './Results.vue';
import Flood from './Flood.vue';
import AddCfrd from './AddCfrd.vue';
import Plan from './Plan.vue';
import SecordMenu from './SecordMenu.vue';
import MaterialSource from './MaterialSource.vue';
import DamLevelConfig from './DamLevelConfig.vue';
import TestParam from './TestParam.vue';
import SimulationParam from './SimulationParam.vue';
import SlopeStabilityResult from './SlopeStabilityResult.vue';
import StaticForceResult from './StaticForceResult.vue';
import PowerResult from './PowerResult.vue';
import {
  getTree,
  getDamStatistics,
  getDamInfo,
  getDamInfoDetail,
  getAllDamInfo,
  getRiverArea,
  exportDamStatistics,
  exportBasic
} from '@/api/record.js';
import { getUserInfo } from '@/api/user.js';
import shouqi from '@/assets/home/shouqi.png';
import zhankai from '@/assets/home/zhankai.png';
import { mapState } from 'vuex';
import MyModal from '@/components/MyModal';

// 坝料二级菜单
const secordData1 = [
  {
    key: 'materialSource',
    label: '料源',
    value: '100',
    active: false
  },
  {
    key: 'damLevelConfig',
    label: '级配',
    value: '101',
    active: false
  },
  {
    key: 'testParam',
    label: '试验参数',
    value: '102',
    active: false
  },
  {
    key: 'simulationParam',
    label: '模拟参数',
    value: '103',
    active: false
  }
];
// 计算成果二级菜单
const secordData2 = [
  {
    key: 'slopeStabilityResult',
    label: '坝坡稳定计算成果',
    value: '104',
    active: false
  },
  {
    key: 'staticForceResult',
    label: '坝体应力变形最大值静力计算结果',
    value: '105',
    active: false
  },
  {
    key: 'powerResult',
    label: '坝体应力变形最大值动力计算结果',
    value: '106',
    active: false
  }
];

export default {
  name: 'record',
  components: {
    Cesium,
    MyLine,
    MyLinetwo,
    MyDrop,
    RightInfo,
    RightDetails,
    Basic,
    Section,
    Material,
    Structure,
    Geology,
    Panel,
    Board,
    Prevention,
    Results,
    Flood,
    AddCfrd,
    Plan,
    SecordMenu,
    MaterialSource,
    DamLevelConfig,
    TestParam,
    SimulationParam,
    SlopeStabilityResult,
    StaticForceResult,
    PowerResult,
    MyModal
  },
  data() {
    return {
      // 筛选条件
      isFilter: false,
      // 大的地图
      mapStatus: 'big', // big 大地图  small 聚焦
      searchTitle: '',
      current: 2, //左侧切换栏 1.流域水系 2.省行政区
      rightCurrent: 1, //右侧切换栏 1.基本信息 2.详细信息
      checkedOne: true,
      checkedTwo: true,
      checkedThr: true,
      isEdit: false, // 弹窗显示隐藏
      isLook: false, // 查看还是编辑
      activeType: '',
      showLegend: true, //图例显示
      showRight: false, // 右侧显示
      treeParams: {
        type: 2 // 查询类型 1、流域水系 2、省行政区
      },
      treeProps: {
        children: 'child',
        title: 'name',
        key: 'id'
      },
      selectId: '', //选中的面板坝id
      statisticForm: {
        yearBuiltNum: []
      },
      secordMenu: 1,
      secordData: secordData1,
      secordFlag: false,
      isSecordShow: false,
      serordType: '',
      // 基本信息
      infoData: {},
      // 基本信息
      infoFormItem: [
        {
          key: 'stationName',
          label: '电站名称',
          propsType: 'input'
        },
        {
          key: 'watershedName',
          label: '所属流域',
          propsType: 'input'
        },
        {
          key: 'provinceName',
          label: '所属行政区',
          propsType: 'input'
        },
        {
          key: 'stationType',
          label: '类型',
          propsType: 'select',
          propsOptions: [
            {
              name: '常规水电站',
              value: '1'
            },
            {
              name: '抽水蓄能电站',
              value: '2'
            },
            {
              name: '其他',
              value: '3'
            }
          ],
          isMarginBtm: true
        },
        {
          key: 'damHeight',
          label: '坝高',
          propsType: 'input'
        },
        {
          key: 'damLength',
          label: '坝长',
          propsType: 'input'
        },
        {
          key: 'damAspectRatio',
          label: '长高比',
          propsType: 'input'
        },
        {
          key: 'upstreamSlopeRatio',
          label: '上游坡比',
          propsType: 'input'
        },
        {
          key: 'downstreamSlopeRatio',
          label: '下游坡比',
          propsType: 'input'
        },
        {
          key: 'damVolume',
          label: '体积',
          isMarginBtm: true,
          propsType: 'input'
        },
        {
          key: 'installedCapacity',
          label: '装机容量',
          isMarginBtm: true,
          propsType: 'input'
        },
        {
          key: 'waterLevel',
          label: '水位',
          propsType: 'input'
        },
        {
          key: 'storageCapacity',
          label: '库容',
          propsType: 'input'
        },
        {
          key: 'floodDischarge',
          label: '泄洪量',
          propsType: 'input'
        },
        {
          key: 'seismicIntensity',
          label: '地震烈度',
          isMarginBtm: true,
          propsType: 'input'
        },
        {
          key: 'startYear',
          label: '开工年份',
          propsType: 'input'
        },
        {
          key: 'builtYear',
          label: '建成年份',
          isMarginBtm: true,
          propsType: 'input'
        },
        {
          key: 'designUnit',
          label: '设计单位',
          propsType: 'input'
        },
        {
          key: 'builtPurpose',
          label: '建成目的',
          propsType: 'input'
        }
      ],
      // 左侧树形结构
      treeData: [],
      // 详细信息
      detailsInfo: {},
      // 详细信息
      detailsItem: [
        {
          key: '10',
          title: '平面布置图',
          type: 'plan',
          active: false
        },
        {
          key: '1',
          title: '坝体主断面分区图',
          type: 'section',
          active: false
        },
        {
          key: '2',
          title: '坝料',
          type: 'material',
          active: false
        },
        {
          key: '3',
          title: '止水结构',
          type: 'structure',
          active: false
        },
        {
          key: '4',
          title: '地质',
          type: 'geology',
          active: false
        },
        {
          key: '5',
          title: '面板',
          type: 'panel',
          active: false
        },
        {
          key: '6',
          title: '趾板',
          type: 'board',
          active: false
        },
        {
          key: '7',
          title: '防渗',
          type: 'prevention',
          active: false
        },
        {
          key: '8',
          title: '计算成果',
          type: 'results',
          active: false
        },
        {
          key: '9',
          title: '泄水建筑物',
          type: 'flood',
          active: false
        }
      ],
      // 图片轮播
      bannerList: [],
      isShowCfrd: true,
      shouqi: shouqi,
      zhankai: zhankai,
      isShowLegend: true,
      selectedKeys: [''],
      selectRecord: {},
      // 筛选条件
      searchForm: {
        watershed: '', //所属流域
        provinceId: undefined, //所属行政区id
        stationType: undefined, //类型
        damHeight: undefined, //坝高
        damLength: undefined, //坝长
        installedCapacity: undefined, //装机容量
        stationStatus: undefined //建设状态
      },
      searchData: [],
      replaceFields: {
        children: 'children',
        title: 'areaName',
        key: 'id',
        value: 'id'
      },
      watershedDataForm: [], //所属流域
      selectDataForm: [], //行政区
      longitude: '', //经度
      latitude: '', //纬度
      scene: '3D', //默认2D
      showRightMenu: true,
      // iExpandedKeys: ['']
      userRole: 0, // 0 无权限 (普通用户) 1 一般权限(中级用户 高级用户) 2 审核权限(审核人员) 3全部权限(高级管理员)
      swiperOption: {
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        }
      },
      spinning: false, //
      spinningXq: false,
      visible: false,
      checkedList: [],
      isRobotIn: false,
      visibleDrawer: false,
      isTigs: false
    };
  },

  computed: {
    ...mapState({
      showMenu: state => state.user.showMenu
    })
  },
  watch: {
    searchTitle(nl) {
      if (nl) {
        this.isShowCfrd = false;
        this.isShowLegend = false;
        this.getData();
      } else {
        if (!this.isFilter) {
          this.isShowCfrd = true;
          this.isShowLegend = true;
        }
      }
    },
    searchForm: {
      handler(nl, ol) {
        this.getData();
      },
      deep: true
    }
  },

  mounted() {
    this.$store.dispatch('setting/changeLoading', false);
    this.getRiverArea(2);
    this.getRole();
    this.getTreeData();
    this.getStatic({});
    this.getRiverArea(1);
    if (this.$route.query.panelType) {
      this.getResubmit(this.$route.query);
    }
  },
  methods: {
    // 获取所有行政区/所属流域
    getRiverArea(type) {
      getRiverArea(type).then(res => {
        if (type == 2) {
          this.selectDataForm = res.data;
        } else if (type == 1) {
          this.watershedDataForm = res.data;
        }
      });
    },
    // 获取角色列表
    getRole() {
      getUserInfo().then(res => {
        this.userRole =
          res.data.roleId == '061b269d85c748bdbca2e8a866b5afaf'
            ? 3
            : res.data.roleId == '08323e00758146f0b19d5c1d26fd9eed'
            ? 2
            : res.data.roleId == '8f085695e4104d3d9a9ea8347af2f43b'
            ? 1
            : res.data.roleId == 'a77da3535b084bb285a69889efd11bd6'
            ? 1
            : res.data.roleId == 'ec48bae4b7d84f3b8982b14cf6c36ac0'
            ? 0
            : 0;
      });
    },
    getTreeData() {
      getTree(this.treeParams).then(res => {
        this.treeData = res.data;
      });
    },
    getData() {
      const params = {
        keyword: this.searchTitle,
        ...this.searchForm
      };
      getAllDamInfo(params).then(res => {
        this.searchData = res.data;
      });
    },
    handleCurrent(type, item) {
      this.spinning = true;
      this.isSecordShow = false;
      if (item == 'current') {
        this.treeParams.type = type;
        this.getTreeData();
      }
      if (item == 'rightCurrent') {
        this.secordFlag = false;
        if (type == 1) {
          // 基础信息
          this.getDamInfo(this.selectId);
        } else if (type == 2) {
          // 详细信息
          if (this.userRole == 0) {
            this.$message.error('当前用户没有权限');
            return;
          }
          this.getDamInfoDetail(this.selectId);
        }
      }
      this[item] = type;
      this.isEdit = false;
      this.activeType = '';
      this.detailsItem.map(it => {
        it.active = false;
      });
    },
    handleAdd() {
      this.isEdit = true;
      this.activeType = 'addCfrd';
    },
    handleImport() {
      this.visible = true;
    },
    handleEditInfo() {
      // 基础信息
      this.getDamInfo(this.selectId);
      this.isEdit = true;
      this.activeType = 'basic';
    },
    handleCancelInfo(type) {
      if (type) {
        if (this.rightCurrent == 1) {
          // 基础信息
          this.getDamInfo(this.selectId);
        } else {
          // 详细信息
          this.getDamInfoDetail(this.selectId);
        }
      }
      this.$refs.myForm.resetFields();

      this.isEdit = false;
      this.detailsItem.map(it => {
        it.active = false;
      });
    },
    handleSecordItem(item, type) {
      this.secordFlag = false;
      this.spinningXq = true;
      this.serordType = item.key;
      this.isSecordShow = true;
      this.isLook = type;
      this.secordData.map(it => {
        it.active = false;
        if (item.key == it.key) {
          it.active = true;
        }
      });
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.spinningXq = false;
      }, 500);
    },
    handleCancelSecord(type) {
      this.isSecordShow = false;
      this.secordData.map(it => {
        it.active = false;
      });
      if (type) {
        // 详细信息
        this.getDamInfoDetail(this.selectId);
      }
    },
    handleDetailItem(item, type) {
      if (!item.type) return this.$message.info('暂未开发');
      this.spinningXq = true;
      this.isFilter = false;
      this.isSecordShow = false;
      this.detailsItem.map(it => {
        it.active = false;
        if (item.key == it.key) {
          it.active = true;
          this.activeType = it.type;
        }
      });
      if (item.type == 'material') {
        // 坝料
        this.secordData = secordData1;
        this.secordMenu = 1;
        this.secordFlag = true;
        this.isEdit = false;
      } else if (item.type == 'results') {
        // 计算成果
        this.secordData = secordData2;
        this.secordMenu = 2;
        this.secordFlag = true;
        this.isEdit = false;
      } else {
        this.secordFlag = false;
        this.isEdit = true;
        this.isLook = type;
      }
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.spinningXq = false;
      }, 500);
    },
    // 左侧树形结构点击
    handleItem(record) {
      this.spinning = true;

      this.selectedKeys = [record.id];
      this.selectRecord = record;
      // this.iExpandedKeys = [record.id];
      if (record.stationStatus) {
        if (record.latitude && record.latitude != '') {
          this.longitude = record.longitude;
          this.latitude = record.latitude;
          this.$refs.myCesium.flyTo(record);
        } else {
          this.longitude = '';
          this.latitude = '';
          this.$message.info('当前面板坝没有位置信息');
        }
        // 点击面板坝
        this.isEdit = false;
        this.showLegend = false;
        this.mapStatus = 'small';
        this.selectId = record.id;
        if (this.rightCurrent == 1) {
          // 基本信息
          this.getDamInfo(record.id);
        } else {
          // 详细信息
          this.getDamInfoDetail(record.id);
        }
      } else {
        // 区域
        this.showLegend = true;
        this.mapStatus = 'big';

        // 数据统计接口
        if (this.treeParams.type == 1) {
          // 水域
          this.getStatic({ watershedId: record.id, provinceId: '' });
        } else {
          // 省行政区
          if (record.parentId) {
            // 二级
            this.getStatic({ watershedId: record.id, provinceId: record.parentId });
          } else {
            const item = {
              longitude: record.centerPoint[0],
              latitude: record.centerPoint[1]
            };
            this.$refs.myCesium.flyTo(item, 3500000);
            this.$refs.myCesium.loadRiverGeoJson2(record.name);

            // 一级
            this.getStatic({ watershedId: '', provinceId: record.id });
          }
        }
      }
    },
    // 统计数据
    getStatic(data) {
      getDamStatistics(data).then(res => {
        this.statisticForm = res.data;
        this.showRight = true;
      });
    },
    // 面板坝详情
    getDamInfo(id) {
      getDamInfo(id).then(res => {
        console.log('1111');
        this.spinning = false;
        this.infoData = res.data;
        this.bannerList = [];
        if (res.data.stationImg && res.data.stationImg != '') {
          res.data.stationImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.antiSeepageImg && res.data.antiSeepageImg != '') {
          res.data.antiSeepageImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.calculationResultImg && res.data.calculationResultImg != '') {
          res.data.calculationResultImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.drainageStructureImg && res.data.drainageStructureImg != '') {
          res.data.drainageStructureImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.geologyImg && res.data.geologyImg != '') {
          res.data.geologyImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.panelImg && res.data.panelImg != '') {
          res.data.panelImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.seamWaterproofImg && res.data.seamWaterproofImg != '') {
          res.data.seamWaterproofImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.sectionZoningImg && res.data.sectionZoningImg != '') {
          res.data.sectionZoningImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.splitWidthImg && res.data.splitWidthImg != '') {
          res.data.splitWidthImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.toeBoardImg && res.data.toeBoardImg != '') {
          res.data.toeBoardImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.waterproofFormImg && res.data.waterproofFormImg != '') {
          res.data.waterproofFormImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.xrayProfileImg && res.data.xrayProfileImg != '') {
          res.data.xrayProfileImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }

        if (res.data.peripheralJointImg && res.data.peripheralJointImg != '') {
          res.data.peripheralJointImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.verticalJointImg && res.data.verticalJointImg != '') {
          res.data.verticalJointImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.constructionJointImg && res.data.constructionJointImg != '') {
          res.data.constructionJointImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.planeLayoutImg && res.data.planeLayoutImg != '') {
          res.data.planeLayoutImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        this.showRight = true;
      });
    },
    // 面板坝详细信息
    getDamInfoDetail(id) {
      getDamInfoDetail(id).then(res => {
        console.log('222');
        this.spinning = false;
        this.detailsInfo = res.data;
        this.bannerList = [];
        if (res.data.stationImg && res.data.stationImg != '') {
          res.data.stationImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.antiSeepageImg && res.data.antiSeepageImg != '') {
          res.data.antiSeepageImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.calculationResultImg && res.data.calculationResultImg != '') {
          res.data.calculationResultImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.drainageStructureImg && res.data.drainageStructureImg != '') {
          res.data.drainageStructureImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.geologyImg && res.data.geologyImg != '') {
          res.data.geologyImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.panelImg && res.data.panelImg != '') {
          res.data.panelImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.seamWaterproofImg && res.data.seamWaterproofImg != '') {
          res.data.seamWaterproofImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.sectionZoningImg && res.data.sectionZoningImg != '') {
          res.data.sectionZoningImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.splitWidthImg && res.data.splitWidthImg != '') {
          res.data.splitWidthImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.toeBoardImg && res.data.toeBoardImg != '') {
          res.data.toeBoardImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.waterproofFormImg && res.data.waterproofFormImg != '') {
          res.data.waterproofFormImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.xrayProfileImg && res.data.xrayProfileImg != '') {
          res.data.xrayProfileImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.peripheralJointImg && res.data.peripheralJointImg != '') {
          res.data.peripheralJointImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.verticalJointImg && res.data.verticalJointImg != '') {
          res.data.verticalJointImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.constructionJointImg && res.data.constructionJointImg != '') {
          res.data.constructionJointImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        if (res.data.planeLayoutImg && res.data.planeLayoutImg != '') {
          res.data.planeLayoutImg.split(',').map(item => {
            // this.getImgUrl(item);
            this.bannerList.push({ src: item });
          });
        }
        this.showRight = true;
      });
    },
    flyTo(item) {
      this.longitude = item.longitude;
      this.latitude = item.latitude;
      // 点击面板坝
      this.showLegend = false;
      this.mapStatus = 'small';
      this.selectId = item.id;
      this.getDamInfo(item.id);
      this.selectedKeys = [item.id];
    },

    handleFilter() {
      if (!this.isFilter) {
        this.isShowCfrd = false;
        this.isShowLegend = false;
      } else {
        this.searchForm = {
          watershed: '', //所属流域
          provinceId: undefined, //所属行政区id
          stationType: undefined, //类型
          damHeight: undefined, //坝高
          damLength: undefined, //坝长
          installedCapacity: undefined, //装机容量
          stationStatus: undefined //建设状态
        };
        if (!this.searchTitle) {
          this.isShowCfrd = true;
          this.isShowLegend = true;
        }
      }
      this.isFilter = !this.isFilter;
    },
    onSearchItem(item) {
      this.spinning = true;
      if (item.latitude && item.latitude != '') {
        this.longitude = item.longitude;
        this.latitude = item.latitude;
        this.$refs.myCesium.flyTo(item);
      } else {
        this.longitude = '';
        this.latitude = '';
        this.$message.info('当前面板坝没有位置信息');
      }

      // 点击面板坝
      this.showLegend = false;
      this.mapStatus = 'small';
      this.selectId = item.id;
      if (this.rightCurrent == 1) {
        // 基本信息
        this.getDamInfo(item.id);
      } else {
        // 详细信息
        this.getDamInfoDetail(item.id);
      }
      this.searchTitle = '';
    },
    handleChange() {
      this.$refs.myCesium.change();
    },
    handleHome() {
      this.longitude = '';
      this.latitude = '';
      this.showLegend = true;
      this.isShowLegend = true;
      this.$refs.myCesium.setProint(105.3686, 33.3736, 10000000.0);
    },
    handleAmplify() {
      this.$refs.myCesium.amplifyMap();
    },
    handleReduce() {
      this.$refs.myCesium.reduceMap();
    },
    setCoordinate(longitude, latitude) {
      this.longitude = longitude;
      this.latitude = latitude;
    },
    setScene(text) {
      this.scene = text;
    },
    handleExport() {
      const record = this.selectRecord;
      // 数据统计接口
      if (this.treeParams.type == 1) {
        // 水域
        this.getExport({ watershedId: record.id, provinceId: '' });
      } else {
        // 省行政区
        if (record.parentId) {
          // 二级
          this.getExport({ watershedId: record.id, provinceId: record.parentId });
        } else {
          // 一级
          this.getExport({ watershedId: '', provinceId: record.id });
        }
      }
    },
    getExport(data) {
      exportDamStatistics(data).then(res => {
        let filename = `面板坝数据统计.xls`;
        let eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        let blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=UTF-8' });
        const hrefUrl = URL.createObjectURL(blob);
        eleLink.href = hrefUrl; // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click(); // 然后移除
        document.body.removeChild(eleLink);
      });
    },

    handleShowMenu() {
      this.isShowCfrd = true;
      this.isShowLegend = true;
      this.$store.dispatch('user/updateShow', !this.showMenu);
    },
    handleShowRightMenu() {
      this.showRightMenu = !this.showRightMenu;
    },
    getResubmit(query) {
      const { damId, panelType } = query;
      // 点击面板坝
      this.showLegend = false;
      this.mapStatus = 'small';
      this.selectId = damId;
      this.$store.dispatch('user/updateShow', false);

      if (panelType == 1) {
        this.rightCurrent = 1;
        this.getDamInfo(damId);
        this.isEdit = true;
        this.activeType = 'basic';
      } else if (panelType == 101) {
        this.rightCurrent = 2;
        this.getDamInfoDetail(damId);

        this.handleDetailItem(
          {
            key: '2',
            title: '坝料',
            type: 'material',
            active: false
          },
          false
        );
        let selectItem = secordData1.filter(item => item.value == panelType)[0];
        this.handleSecordItem(selectItem, false);
      } else {
        this.rightCurrent = 2;
        this.getDamInfoDetail(damId);
        this.handleDetailItem(this.detailsItem[panelType - 2], false);
      }
    },

    onmouseRobot() {
      this.isRobotIn = true;
      if (this.timers) {
        clearTimeout(this.timers);
      }
      this.timers = setTimeout(() => {
        this.isTigs = true;
      }, 1000);
    },
    handleBack() {
      this.isTigs = false;
      this.isRobotIn = false;
    },
    handleDrawer() {
      if (!this.isRobotIn) {
        // 隐藏
        this.onmouseRobot();
      } else {
        // 展示
        if (this.isRobotIn) {
          this.visibleDrawer = true;
        }
      }
    },
    handleCancel() {
      this.visible = false;
    },
    handleSumbit() {
      if (!this.checkedList.length) {
        this.$message.info('请选择要导出的类型');
        return;
      }
      let params = {
        stationStatusList: this.checkedList
      };
      exportBasic(params).then(res => {
        let filename = `面板坝基础数据.xlsx`;
        let eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        let blob = new Blob([res], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
        });
        const hrefUrl = URL.createObjectURL(blob);
        eleLink.href = hrefUrl; // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click(); // 然后移除
        document.body.removeChild(eleLink);
        setTimeout(() => {
          this.checkedList = [];
          this.visible = false;
        }, 1000);
      });
    },
    onCloseDrawer() {
      this.visibleDrawer = false;
    }
  }
};
</script>

<style scoped lang="scss">
.myTitle {
  .title-box {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    padding: 4px 8px;
    background: #002463;

    .in-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      background: linear-gradient(90deg, rgba(22, 102, 240, 0.4) 0%, rgba(22, 102, 240, 0) 100%);
      padding-left: 16px;

      .jiao {
        position: absolute;
        left: -5px;
        top: -5px;
        width: 20px;
        height: 20px;
      }

      .img {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}

.box {
  width: 100%;
  overflow: hidden;
  // height: 100%;
  height: calc(100vh - 68px);
  display: flex;
  position: relative;

  // 机器人
  .robot {
    position: absolute;
    top: 6%;
    right: 0;
    transform: translateY(-50%) translateX(50%) rotate(-45deg);
    transition: all 1s;
    display: flex;
    align-items: center;

    .qipao {
      width: 174px;
      height: 44px;
    }

    .tigsBox {
      position: relative;

      .qipaocody {
        position: absolute;
        left: 13px;
        top: 10px;
        width: 144px;
        height: 24px;
        background-color: #fff;
        animation: fadeInOut 10s ease-in-out infinite;
      }
    }

    @keyframes fadeInOut {
      0% {
        width: 144px;
        left: 13px;
      }

      20% {
        width: 0;
        left: 157px;
      }

      100% {
        width: 0;
        left: 157px;
      }
    }

    .robotImg {
      width: 60px;
      height: 83px;
    }

    .closeImg {
      width: 15px;
      height: 15px;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .tobot-active {
    transform: translateY(-50%);
    right: 20px;
  }

  .add-box {
    position: absolute;
    top: 8px;
    background-color: #021c2e;
    border-radius: 4px;
    box-shadow: 0px 0px 6px #1666f0;
    width: 450px;
    right: 326px;
  }

  .ant-checkbox-group {
    width: 100%;
  }

  .ant-checkbox-wrapper {
    color: #fff !important;
    font-size: 16px !important;
  }

  .myCheckBox {
    width: 100%;
    padding: 40px;
    color: #fff;
  }

  .myBtnBox {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .leftBox {
    width: 316px;
    color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    padding-left: 24px;

    .myMenuIcon {
      position: absolute;
      right: -36px;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 48px;
      opacity: 1;
      border-radius: 0px 10px 10px 0px;
      background: rgba(22, 102, 240, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .search {
      margin-top: 16px;
    }

    .left-tree {
      height: calc(100vh - 270px);
      background: rgba($color: #01112e, $alpha: 0.5);
      padding: 8px;
      border-radius: 4px;
      color: #fff;

      .top-box {
        height: 48px;
        background: rgba(22, 102, 240, 0.2);
        font-size: 18px;
        padding: 4px;
        display: flex;
        margin-bottom: 8px;

        .item {
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .itemActive {
          background: #1666f0;
          border-radius: 4px;
        }
      }

      .addBtn-box {
        height: 48px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: #14e4ff;
      }

      .add-import {
        border-radius: 4px;
        background: rgba(22, 102, 240, 0.2);
        padding: 11px 20px;
        cursor: pointer;
      }

      .add {
        display: flex;
        align-items: center;
        border-radius: 4px;
        background: rgba(22, 102, 240, 0.2);
        padding: 11px 31px;
        cursor: pointer;
      }

      .add-once {
        padding: 11px 86px;
      }
    }
  }

  .leftBox-no {
    left: -316px;
  }

  .leftBox,
  .leftBox-no {
    transition: left 0.5s;
  }

  .drawer-slide-enter-active,
  .drawer-slide-leave-active {
    transition: all 0.5s cubic-bezier(0.1, 0.7, 0.1, 1);
  }

  .left-menu {
    color: #fff;
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #021c2e;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;

    .myIcon {
      font-size: 28px;
      margin: 50px 0;
    }
  }

  .myTree {
    height: calc(100% - 114px);
    overflow: hidden;
    overflow-y: auto;
  }

  .myTree::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
  }

  .myTree {
    scrollbar-width: none;
  }

  .myTree ::v-deep .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background: linear-gradient(90deg, rgba(22, 102, 240, 0.4) 0%, rgba(22, 102, 240, 0) 100%) !important;
  }

  .myTree ::v-deep .ant-tree-node-content-wrapper:hover {
    background: linear-gradient(90deg, rgba(22, 102, 240, 0.4) 0%, rgba(22, 102, 240, 0) 100%) !important;
  }

  .shaixuan ::v-deep .ant-switch {
    background-color: #999b9c !important;
  }

  .shaixuan ::v-deep .ant-switch-checked {
    background: #1890ff !important;
  }

  .myTree ::v-deep .ant-tree-switcher {
    height: 40px;
    line-height: 40px;
  }

  .myTree ::v-deep .ant-tree-node-content-wrapper {
    width: 93%;
    height: 40px;

    .ant-tree-node-selected {
      background: red !important;
    }

    .tree-box {
      display: flex;
      justify-content: space-between;
      width: 100%;
      color: #fff;
      height: 100%;
      align-items: center;
      position: relative;
      padding-left: 16px;
      padding-right: 16px;
      font-size: 16px;

      .jiao {
        position: absolute;
        left: -5px;
        top: -5px;
        width: 20px;
        height: 20px;
      }

      .img {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }

      .num {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
      }
    }
  }

  .search ::v-deep .ant-input {
    background: #002463 !important;
    border: 1px solid #1666f0;
    height: 100%;
    color: #fff;
  }

  .search {
    position: relative;

    .searchResult {
      position: absolute;
      top: 50px;
      left: 0;
      z-index: 10;
      width: 450px;
      border-radius: 4px;
      background: rgba(2, 28, 46, 1);
      box-shadow: 0px 0px 6px #1666f0;
      padding: 8px;
      font-size: 18px;

      .main-content {
        max-height: 320px;
        overflow: hidden;
        overflow-y: auto;
      }

      .main-content::-webkit-scrollbar {
        display: none;
        /*隐藏滚动条*/
      }

      .main-content {
        scrollbar-width: none;
      }

      .filter-box {
        padding-bottom: 12px;

        .item {
          height: 50px;
          display: flex;
          align-items: center;
          padding: 8px;

          .left {
            width: 100px;
            margin-right: 12px;
          }

          .right {
            width: 80%;
          }
        }
      }

      .filter-box ::v-deep .ant-select-selection {
        background: rgba(22, 102, 240, 0.2);
        border: 1px solid #1666f0;
        color: #fff;
      }

      .filter-box ::v-deep i {
        color: #fff;
      }

      .filter-box ::v-deep .ant-select-clear-icon {
        color: #fff;
      }

      .filter-box ::v-deep .ant-select-selection__clear {
        background: none;
      }

      .top-box {
        width: 100%;
        height: 48px;
        display: flex;
        background: rgba(22, 102, 240, 0.2);

        .item {
          width: 33%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .main-box {
        width: 100%;
        height: 48px;
        display: flex;

        .item {
          width: 33%;
          height: 100%;
          padding: 12px 16px;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .main-map {
    flex: 1;
    height: calc(100vh - 68px);
    position: relative;

    .printBox {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      width: 320px;
      height: 48px;
      display: flex;

      .item {
        width: 150px;
        border-radius: 4px;
        background: rgba(34, 34, 34, 0.8);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          padding: 7px 12px;
          border-right: 1px solid rgba(204, 204, 204, 1);
        }

        .right {
          flex: 1;
          display: flex;
          justify-content: center;
        }
      }
    }

    .shaixuan {
      height: 48px;
      background: rgba(34, 34, 34, 0.8);
      padding: 20px 24px;
      border-radius: 4px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: absolute;
      bottom: 20px;
      left: 24px;
      width: 600px;

      .item-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 18px;
        margin: 12px 0;
      }

      .text {
        flex: 1;
        margin-left: 8px;
        margin-right: 25px;
      }
    }

    .ability {
      position: absolute;
      bottom: 20px;
      right: 350px;
      color: #fff;

      .item {
        width: 48px;
        height: 48px;
        background-color: rgba(22, 102, 240, 0.2);
        border-radius: 4px;
        border: 1px solid #1666f0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        cursor: pointer;

        img {
          width: 20px;
          height: 20px;
        }
      }
    }

    .ability-no {
      right: 20px;
    }

    .ability,
    .ability-no {
      transition: right 0.5s;
    }
  }

  .title-box {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    padding: 4px 8px;
    background: #002463;
    margin-top: 8px;
    margin-bottom: 4px;
    border-radius: 4px;

    .in-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      background: linear-gradient(90deg, rgba(22, 102, 240, 0.4) 0%, rgba(22, 102, 240, 0) 100%);
      padding-left: 16px;

      .jiao {
        position: absolute;
        left: -5px;
        top: -5px;
        width: 20px;
        height: 20px;
      }

      .img {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }

  .rightBox ::v-deep .ant-spin-nested-loading > div > .ant-spin {
    max-height: 100%;
    background: rgba($color: #000000, $alpha: 0.5);
  }

  .rightBox {
    width: 316px;
    height: 100%;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;

    .myMenuIcon {
      position: absolute;
      left: -36px;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 48px;
      opacity: 1;
      border-radius: 10px 0px 0px 10px;
      background: rgba(22, 102, 240, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .secordMenu {
      position: absolute;

      z-index: 10;
    }

    .secordMenu1 {
      left: -208px;
      top: 47%;
    }

    .secordMenu2 {
      left: -288px;
      top: 70%;
    }

    .one-box {
      background: #01112e;
      padding: 8px;
      border-radius: 4px;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 8px;

      .one-item {
        width: 146px;
        height: 91px;
        border-radius: 4px;
        background: #012668;
        color: #fff;
        padding: 12px 8px;
        font-size: 12px;
        position: relative;

        .title {
          margin-bottom: 15px;
        }

        .text {
          word-wrap: break-word;
          word-break: break-all;

          .num {
            font-size: 24px;
            font-weight: 700;
            margin-right: 4px;
            text-shadow: 0px 0px 6px #3b96ff;
          }
        }

        .img {
          position: absolute;
          right: 8px;
          bottom: 8px;
        }
      }

      .two-item {
        width: 100%;
        height: 115px;
        border-radius: 4px;
        background: #012668;
      }

      .three-item {
        width: 100%;
        height: 200px;
        border-radius: 4px;
        background: #012668;
      }
    }

    .two-box {
      background: #012668;
      padding: 8px;
      border-radius: 4px;

      .top-box {
        height: 48px;
        background: rgba(22, 102, 240, 0.2);
        font-size: 18px;
        padding: 4px;
        display: flex;
        margin-bottom: 8px;

        .item {
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .itemActive {
          background: #1666f0;
          border-radius: 4px;
        }
      }

      .info {
        margin-top: 16px;
        height: calc(100vh - 400px);
        overflow: hidden;
        overflow-y: auto;
      }

      .info::-webkit-scrollbar {
        display: none;
        /*隐藏滚动条*/
      }

      .info {
        scrollbar-width: none;
      }
    }

    .hover-box {
      position: absolute;
      top: 8px;
      background-color: #021c2e;
      border-radius: 4px;
      box-shadow: 0px 0px 6px #1666f0;
      z-index: 10;
    }

    .hover-secord-big {
      width: calc(100vw - 416px);
      left: calc((100vw - 406px) * -1);
    }

    .hover-secord-small {
      width: calc(100vw - 416px);
      left: calc((100vw - 406px) * -1);
    }

    .hover-box-big {
      width: calc(100vw - 416px);
      left: calc((100vw - 406px) * -1);
    }

    .hover-box-small {
      width: 450px;
      left: -460px;
    }

    .noBanner {
      width: 100%;
      height: 160px;
      border: 1px solid rgba(22, 102, 240, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .rightBox-no {
    right: -316px;
  }

  .rightBox,
  .rightBox-no {
    transition: right 0.5s;
  }

  .my-banner {
    img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }
  }
}
</style>

<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  min-height: 160px;
  max-height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide:first-child {
  width: 100%;
  height: 100%;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 26px;
  height: 26px;
  padding: 2px;
  font-size: 22px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0.8;
}

.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}

.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 1;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
